<!-- 首页头部 -->
<template>
  <div>
      <div class="header">
        <div class="header-logo">欢迎来到徐小鹏博客</div>
      </div>
      <div class="nav">
        <ul class="navbar">
          <router-link
            v-for="(item,index) of nav"
            :to="item.path"
            :key="index">
            <li @click="handleClickli(index)">{{item.title}}</li>
          </router-link>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      nav: [
        {title: '首页', en: 'Code', path: '/'},
        {title: '文章', en: 'Source', path: '/source'},
        {title: '专栏', en: 'zl', path: '/zl'},
        {title: '关于', en: 'About', path: '/about'},
        {title: '联系', en: 'Connect', path: '/connect'}
      ]
    }
  },
  mounted () {
    this.getHeader()
  },
  methods: {
    getHeader () {
      // Vue.axios.get('http://api.blog.com/api/v1/header').then(data => {
      //   console.log(data)
      // }).catch(err => {
      //   console.log(err)
      // })
    }
  }
}

</script>

<style lang='stylus' scoped>
  .header-logo
    background aquamarine
    text-align center
    height  2rem
  .nav
    margin-top .2rem
    .navbar
      display flex
      flex-flow row nowrap
      justify-content center
      li
        margin-left .5rem
        color: #1d0835
</style>
